<!-- 文章列表 -->
<template>
  <el-row class="sharelistBox">
    <el-col
      :span="24"
      class="s-item tcommonBox"
      v-for="(item, index) in articleList"
      :key="index"
    >
      <header>
        <h2>
          <i class="fa fa-fw fa-user"></i>发表于
          <i class="fa fa-fw fa-clock-o"></i
          ><span v-html="showInitDate(item.upload_time, 'all')">{{
            showInitDate(item.upload_time, "all")
          }}</span>
          •
        </h2>
      </header>
      <div class="article-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(img, index) in item.imgUrl" :key="index">
            <div class="grid-content bg-purple">
              <el-image
                style="width: 100%; height: 100%"
                :src="img"
                fit="full"
                :preview-src-list="item.imgUrl"
              >
              </el-image>
              <span
                v-if="show"
                class="delete"
                @click="deleted(img)"
                style="text-align: center; display: block; cursor: pointer"
                >删除图片</span
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {
  ShowArticleAll,
  ArtClassData,
  initDate,
  reqGetImgs,
  reqDeleteImg,
} from "../utils/server.js";
export default {
  name: "Share",
  data() {
    //选项 / 数据
    return {
      artId: 0,
      classId: 0,
      sendId: "",
      timer: null,
      className: "",
      classtwoId: 5,
      keywords: "",
      hasMore: true,
      show: false,
      level: 1,
      shareClass: [
        {
          classId: 1,
          name: "技术分享",
          detshare: [
            { classId: 5, name: "移动端H5", pid: 1 },
            { classId: 6, name: "pc端web", pid: 1 },
            { classId: 7, name: "小程序", pid: 1 },
            { classId: 8, name: "php", pid: 1 },
            { classId: 9, name: "nodejs", pid: 1 },
            { classId: 10, name: "软件", pid: 1 },
            { classId: 11, name: "其他", pid: 1 },
          ],
        },
        { classId: 2, name: "闲言碎语" },
        { classId: 3, name: "事件簿" },
        { classId: 4, name: "创作集" },
      ],
      queryClass: 1,
      articleList: [],
    };
  },

  methods: {
    getDate() {
      reqGetImgs((msg) => {
        if (msg.code == 200) {
          this.articleList = msg.data;
        } else {
          this.$message({
            showClose: true,
            message: "获取图片失败！",
            type: "warning",
          });
        }
      });
    },
    //事件处理器
    showInitDate: function (oldDate, full) {
      // console.log(oldDate,full);
      return initDate(oldDate, full);
    },
    showSearchShowList: function (initpage) {
      //展示数据
      var that = this;
      that.classId =
        that.$route.query.classId == undefined
          ? 0
          : parseInt(that.$route.query.classId); //获取传参的classId
      that.keywords = that.$store.state.keywords; //获取传参的keywords
      that.classtwoId =
        that.$route.query.classtwoId == undefined
          ? ""
          : parseInt(that.$route.query.classtwoId); //获取传参的classtwoId
      that.sendId = that.classtwoId ? that.classtwoId : that.classId;
      that.level = that.keywords ? 0 : that.classtwoId ? 0 : 1;
      // console.log(that.classId);
      // ArtClassData(function(msg){
      //     // console.log(msg);
      //     that.shareClass = msg;
      // })
      //判断当前显示的分类名称 以及子分类
      for (var i = 0; i < that.shareClass.length; i++) {
        if (that.classId == that.shareClass[i].class_id) {
          that.className = that.shareClass[i].cate_name;
          if (
            that.shareClass[i].ChildsSon &&
            that.shareClass[i].ChildsSon.length > 0
          ) {
            that.sonclassList = that.shareClass[i].ChildsSon;
          } else {
            that.sonclassList = "";
          }
        }
      }
      //初始化 文章id为0开始
      that.artId = initpage ? 0 : that.artId;
      // ShowArticleAll(that.artId,that.sendId,that.keywords,that.level,(result)=>{
      //     // console.log(result);
      //     if(result.code==1001){
      //         var msg = result.data;
      //         if(msg.length>0&&msg.length<10){
      //             that.hasMore = false
      //         }else{
      //             that.hasMore = true;
      //         }
      //         that.articleList = initpage ? msg : that.articleList.concat(msg);
      //         that.artId = msg[msg.length-1].id;
      //         // console.log(that.artId);
      //     }else{
      //         that.hasMore = false;
      //         that.articleList = initpage ? [] : that.articleList;
      //     }
      // })
    },
    addMoreFun: function () {
      //查看更多
      this.showSearchShowList(false);
    },
    routeChange: function () {
      var that = this;
      this.showSearchShowList(true);
    },
    deleted(img) {
      this.$confirm("是否删除该图片", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        showConfirmButton: true,
        center: true,
        showCancelButton: true,
        cancelButtonText: "取消删除",
        confirmButtonText: "确认删除",
        beforeClose(type, instance, done) {
          if (type == "cancel") {
            done();
          } else {
            const imgName = img.split("/")[3];
            console.log(imgName);
            reqDeleteImg(imgName, (msg) => {
              console.log(msg);
              if (msg.status == 0) {
                this.$message({
                  showClose: true,
                  message: "删除图片成功！",
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "删除图片失败！",
                  type: "warning",
                });
              }
            });
            done();
            this.timer = setInterval(() => {
              location.reload();
            }, 500);
          }
        },
        type: "warning",
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "routeChange",
    "$store.state.keywords": "routeChange",
  },
  created() {
    var that = this;
    that.routeChange();
  },
  mounted() {
    this.getDate();
    if (localStorage.getItem("show")) {
      this.show = true;
    }
  },
};
</script>

<style>
.el-image__inner {
  height: 70px !important;
  object-fit: contain !important;
}
.delete:hover {
  color: skyblue;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/*分享标题*/
.shareTitle {
  margin-bottom: 40px;
  position: relative;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
}
.shareclassTwo {
  width: 100%;
}
.shareclassTwo li {
  display: inline-block;
}
.shareclassTwo li a {
  display: inline-block;
  padding: 3px 7px;
  margin: 5px 10px;
  color: #fff;
  border-radius: 4px;
  background: #64609e;
  border: 1px solid #64609e;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover {
  transform: translate(0, -3px);
  -webkit-transform: translate(0, -3px);
}
.shareclassTwo li a.active {
  background: #fff;
  color: #64609e;
}
/*文章列表*/
.sharelistBox {
  transition: all 0.5s ease-out;
  font-size: 15px;
}

/*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
        background: #48456C;
    }*/
</style>
